<script setup>
import request from "@/api/request";
import { UPDATE_LINE_STATUS_API } from "@/api/api_constant";
import { reactive, toRefs, ref, computed } from "vue";
import { Dialog, Toast } from "vant";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

// import { useMapState } from "@/hooks/mapper-store";

const store = useStore();
const router = useRouter();
const user = store.state.user;
const show = computed(() => store.state.show);
const token = computed(() => user.token);
const userInfo = computed(() => user.userInfo);
const s_show = ref(show);

const logout = () => {
  Dialog.confirm({
    title: "提示",
    message: "您确认要退出登录吗?",
  })
    .then(async () => {
      Toast("退出成功");
      console.log(user.userInfo);
      await request.put(UPDATE_LINE_STATUS_API, {
        _id: user.userInfo._id,
        qq_account: user.userInfo.qq_account,
        line_status: "outline",
      });
      setTimeout(() => {
        store.dispatch("user/setToken", "");
        store.dispatch("user/setUserInfo", {});
        store.dispatch("notify/setNotifyMessage", {});
        store.dispatch("notify/setGroupNotifyMessage", {});
        localStorage.removeItem("token");
        localStorage.removeItem("userInfo");
        store.dispatch("setShow", false);
        router.push("/login");
      });
    })
    .catch(() => {
      Toast("取消退出");
    });
};

const closePopup = () => {
  store.dispatch("setShow", false);
};
</script>

<template>
  <van-popup
    @click-close-icon="closePopup"
    @click-overlay="closePopup"
    v-model:show="s_show"
    position="left"
    closeable
    :style="{ width: '80%', height: '100%' }"
  >
    <div slot="default">
      <van-cell :title="'我的ID：' + userInfo._id" size="large" />
      <van-cell :title="'我的昵称：' + userInfo.nick_name" size="large" />
      <van-cell :title="'我的QQ号：' + userInfo.qq_account" size="large" />
      <van-cell title="退出登录" @click="logout" size="large" />
    </div>
  </van-popup>
</template>
